import NavLink from 'umi/navlink';
import React from 'react';
import style from './list.less';
import { ActivityIndicator } from 'antd-mobile';
export default class List extends React.Component {
  state = {
    list2: [],
    animating: true,
  };
  render() {
    return (
      <div className={style.box}>
        <ul className={style.father}>
          {this.state.list2.map((item, index) => {
            return (
              <NavLink
                to={{
                  pathname: `/dynamic-list/$song/${item.code}`,
                  state: { id: item.code, url: item.url },
                }}
                key={index}
                className={style.kid}
              >
                <div>
                  <img className={style.img} src={item.cover} />
                </div>
                <div>{item.title}</div>
              </NavLink>
            );
          })}
          <div className="toast-example">
            <ActivityIndicator toast text="Loading..." animating={this.state.animating} />
          </div>
        </ul>
      </div>
    );
  }
  componentDidMount() {
    fetch('/api/client.json')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.setState({
          list2: data.items,
          animating: !this.state.animating,
        });
      });

    // this.props.getrecommendsong();
  }
}
